<template>
    <div>
        <!-- /:dialog-style="{ top: '20px' }" -->
        <a-modal
         v-model:visible="visible" 
         
         :title="formState.id?formState.view?'查看':'编辑':'新增'" 
         @ok="handleOk" 
         @cancel="visible = false"
         class="workshop-add-edit-modal"
         :width="1000"
         :footer="null"
        >
            <div v-if="visible">
                <a-form :form="form" layout="horizontal" class="add-edit-form">
                    <a-form-item label="车间编号">
                        <a-input
                            v-model:value="formState.fcjbh"
                            placeholder="请输入车间编号"
                            v-decorator="[
                                'fcjbh', { initialValue:formState.fcjbh, rules: rules.fcjbh}
                            ]"
                        />
                    </a-form-item>
                    <a-form-item label="车间名称">
                        <a-input
                            v-model:value="formState.fcjmc"
                            placeholder="请输入车间名称"
                            v-decorator="[
                                'fcjmc', { initialValue:formState.fcjmc, rules: rules.fcjmc}
                            ]"
                        />
                    </a-form-item>
                    <a-form-item label="生产线">
                        <a-input
                            v-model:value="formState.fscx"
                            placeholder="请输入生产线"
                            v-decorator="[
                                'fscx', { initialValue:formState.fscx, rules: rules.fscx}
                            ]"
                        />
                    </a-form-item>
                    <a-form-item label="生产地址" class="flex-1-box">
                        <a-textarea 
                            placeholder="请输入生产地址"
                            v-model:value="formState.fscdz"
                            v-decorator="[
                                'fscdz', { initialValue:formState.fscdz, rules: rules.fscdz}
                            ]"
                            :autosize="{ minRows: 3, maxRows: 10000 }"
                        ></a-textarea>
                    </a-form-item>
                    <a-form-item label="负责人">
                        <a-input
                            v-model:value="formState.ffzr"
                            placeholder="请输入负责人"
                            v-decorator="[
                                'ffzr', { initialValue:formState.ffzr, rules: rules.ffzr}
                            ]"
                        />
                    </a-form-item>
                    <a-form-item label="区域分类">
                        <a-select
                            ref="select"
                            placeholder="请选择区域分类"
                            v-model:value="formState.fqyfl"
                            v-decorator="[
                                'fqyfl', { initialValue:formState.fqyfl, rules: rules.fqyfl}
                            ]"
                            >
                            <a-select-option v-for="(item,index) in materialUnitList" :value="item.itemValue" :key="index">{{ item.itemText }}</a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="预警值">
                        <a-input-number
                            style="width: 185px;"
                            :min="0"
                            :precision="0"
                            v-model:value="formState.fyjz"
                            placeholder="请输入预警值"
                            v-decorator="[
                                'fyjz', { initialValue:formState.fyjz, rules: rules.fyjz}
                            ]"
                        />
                    </a-form-item>
                    <a-form-item label="超标值">
                        <a-input-number
                            style="width: 185px;"
                            :min="0"
                            :precision="0"
                            v-model:value="formState.fcbz"
                            placeholder="请输入超标值"
                            v-decorator="[
                                'fcbz', { initialValue:formState.fcbz, rules: rules.fcbz}
                            ]"
                        />
                    </a-form-item>
                    <a-form-item label="投用时间">
                        <a-date-picker
                            v-model:value="formState.ftysj"
                            placeholder="请选择投用时间"
                            v-decorator="[
                                'ftysj', { initialValue:formState.ftysj, rules: rules.ftysj}
                            ]"
                        />
                    </a-form-item>
                    <a-form-item label="有效状态">
                        <a-select
                            placeholder="请选择有效状态"
                            v-model:value="formState.fyxzt"
                        >
                            <a-select-option value="有效">有效</a-select-option>
                            <a-select-option value="无效">无效</a-select-option>
                        </a-select>
                    </a-form-item>
                    <!-- <a-form-item label="备注" class="flex-1-box">
                        <a-textarea 
                            placeholder="请输入备注"
                            v-model:value="formState.fbz"
                            :autosize="{ minRows: 3, maxRows: 10000 }"
                        ></a-textarea>
                    </a-form-item> -->
                </a-form>
            </div>
            
            <div style="
                display: flex; justify-content: flex-end;
                margin-top: 20px; width: 100%;
                background-color: #fff;">
                <a-button @click="visible = false">取消</a-button>
                <a-button v-if="!formState.view" style="margin: 0 20px;" class="blue-btn" type="primary" @click="handleOk(true)">保存</a-button>
                <a-button v-if="!formState.view" class="blue-btn" type="primary" @click="handleOk(false)">保存并关闭</a-button>
            </div>
            <!-- <monitorAdd ref="monitorAddRef" @successAdd="successAdd" /> -->
        </a-modal>
    </div>
</template>
<script>
import assessCheckApi from '../service/api'
import compSelector from '@/components/compSelector/compSelector.vue'
import { ocalityPostAction,spcyQyInfodeleteSccjHjjl } from '../service/index'
import moment from 'moment'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
// import monitorAdd from './monitorAdd.vue'
export default {
    components:{
        compSelector,
        commpVxeTable,
        // monitorAdd,
    },
    props:{

    },
    data(){
        return{
            assessCheckApi:assessCheckApi,
            visible:false,
            formState:{fyxzt:'有效'},
            form: this.$form.createForm(this, { name: 'coordinated' }),
            rules:{
                fcjbh: [{
                    required: true,
                    message: '请输入车间编号',
                    trigger: 'blur',
                }],
                fcjmc: [{
                    required: true,
                    message: '请输入车间名称',
                    trigger: 'blur',
                }],
                fscx: [{
                    required: true,
                    message: '请输入生产线',
                    trigger: 'blur',
                }],
                fscdz: [{
                    required: true,
                    message: '请输入生产地址',
                    trigger: 'blur',
                }],
                ffzr: [{
                    required: true,
                    message: '请输入负责人',
                    trigger: 'blur',
                }],
                fqyfl: [{
                    required: true,
                    message: '请选择区域分类',
                    trigger: 'blur',
                }],
                fyjz: [{
                    type:'number',
                    required: true,
                    message: '请输入预警值',
                    trigger: 'blur',
                }],
                fcbz: [{
                    type:'number',
                    required: true,
                    message: '请输入超标值',
                    trigger: 'blur',
                }],
                ftysj: [{
                    type:'object',
                    required: true,
                    message: '请选择投用时间',
                    trigger: 'blur',
                }],
            },
            monitorColumnsVxe:[{
                title: '菌落数',
                field: 'fwswnd',
            },{
                title: '菌落类型',
                field: 'fjllx',
            },{
                title: '登记时间',
                field: 'fdjsj',
            },{
                title: '登记人',
                field: 'fdjr',
            },{
                title: '操作',
                field: 'id',
                slots: {
                    // 使用插槽模板渲染
                    default: 'operation_btn',
                },
                width:80,
            }],
            monitorFormItem:[],
            materialUnitList:[{
                value:'A级区',
                label:'A级区',
            },{
                value:'B级区',
                label:'B级区',
            },{
                value:'C级区',
                label:'C级区',
            },{
                value:'D级区',
                label:'D级区',
            }],
            refreshTable:null,
        }
    },
    watch:{

    },
    mounted(){
    },
    methods:{
        getData(row,val){
            this.formState = {}
            this.formState = {fqyid:row.fqyid,fpzid:row.fpzid,...val,fyxzt:'有效'}
            this.formState.ftysj = val.ftysj?moment(val.ftysj):''
            //console.log('是否再次获取',val)
            // ocalityPostAction({dictName:'企业生产车间区域分类'}).then(res => {
            //     if(res.code == 200){
            //         this.materialUnitList = res.result
            //     }
            // })
        },
        addClick(){
            this.form.validateFields((err, values) => {
                if (!err) {
                    if(!this.formState.id){
                        this.$message.warning('请先保存生产车间')
                    }else{
                        this.$refs.monitorAddRef.getData({fsccjid:this.formState.id})
                        this.$refs.monitorAddRef.visible = true
                        
                    }
                }else{
                    this.$message.warning('请先保存生产车间')
                }
            })
        },
        successAdd(){
            this.refreshTable = Date.now()
        },
        deleteClick(val){
            var that = this
            this.$confirm({
                title:'您确认要删除吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    spcyQyInfodeleteSccjHjjl({id:val.id}).then(res=>{
                        if(res.code == 200){
                            that.$message.success('删除成功')
                            that.refreshTable = Date.now()
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                },
                
            });
            
        },
        handleOk(val){
            this.form.validateFields((err, values) => {
                if (!err) {
                    if(this.formState.id){
                        this.$emit('editItem',{...this.formState,...values,ftysj:moment(this.formState.ftysj).format('YYYY-MM-DD')},val)
                    }else{
                        this.$emit('addItem',{...this.formState,...values,ftysj:moment(this.formState.ftysj).format('YYYY-MM-DD')},val)
                    }
                    
                }
            })
        },
    }
}
</script>
<style lang="less">
.workshop-add-edit-modal{
    .add-edit-form{
        display: flex;
        flex-wrap: wrap;
        .ant-form-item{
            display: flex;
            margin-bottom: 5px;
        }
        .ant-form-item-label{
            width: 85px;
        }
        .ant-form-item-control-wrapper{
            width: 180px;
        }
        .flex-1-box{
            width: 100%;
            .ant-form-item-control-wrapper{
                flex: 1;
            }
        }
    }
    .ant-modal-body{
        padding: 10px;
    }
}
</style>